<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .active {
            background: orangered;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="text" v-model='keywords' @keydown.down='down' @keydown.up.prevent='up' @keydown.enter='enter'>
        <ul>
            <li v-for='(item,index) in arr' v-if='4>index' :key='item' :class='index===n?"active":""'>{{item}}</li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                //1.初始化数据
                keywords: '',
                arr: [],
                n: -1
            },
            watch: {
                keywords() {
                    if (this.keywords === '') {
                        this.arr = []
                        return;
                    }


                    let tb = document.createElement('script')
                    tb.src = `https://suggest.taobao.com/sug?q=${this.keywords}&callback=aa&code=utf-8`
                    document.body.appendChild(tb)
                }
            },
            methods: {
                //   下键
                down() {
                    this.n++;
                    if (this.n >= 4) {
                        this.n = -1
                    }
                },
                //上键
                up() {
                    this.n--;
                    if (this.n < 0) {
                        this.n = 4
                    }
                },
                //回车
                enter() {
                    window.open(`https://uland.taobao.com/sem/tbsearch?keyword=${this.keywords}`)

                }
            },

        });



        //3.处理数据
        function aa(res) {
            console.log(res);
            vm.arr = res.s
        }
    </script>

</body>

</html>